<template>
    <el-dialog v-model="visible" title="设置当前展会" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form label-width="120px" :model="state.dataForm" ref="dataFormRef" @keyup.enter="state.getDataList()">
            <el-row>
                <el-form-item label="展会名称">
                    <el-input v-model="state.dataForm.exhName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="开展时间">
                    <el-input v-model="state.dataForm.exhBTime" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="展会项目">
                    <ren-select  v-model="state.dataForm.project" dict-type="name" :placeholder="$t('请选择')"></ren-select>
                </el-form-item>
                <div style="margin-left: 20px;">
                    <el-button @click="state.getDataList()" type="primary">{{ $t("query") }}</el-button>
                </div>
            </el-row>
            <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
                v-loading="state.dataListLoading" :data="state.dataList" border
                @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
                <el-table-column type="selection" align="center"></el-table-column>
                <el-table-column align="center" prop="id" label="展会ID" width="70"></el-table-column>
                <el-table-column align="center" prop="exhSName" label="展会简称"></el-table-column>
                <el-table-column align="center" prop="exhName" label="展会名称" width="200"></el-table-column>
                <el-table-column align="center" prop="exhCity" label="举办城市"></el-table-column>
                <el-table-column align="center" prop="exhBTime" label="开始" width="160"></el-table-column>
                <el-table-column align="center" prop="exhETime" label="结束" width="160"></el-table-column>
                <el-table-column align="center" label="是否当前"  width="100">
                    <template v-slot="scope">
                        <div v-if="scope.row.ifCurExh == 1">
                            <el-icon color="#17b3a3">
                                <SuccessFilled />
                            </el-icon>
                        </div>
                        <div v-else></div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 保存 取消 -->
            <el-form-item style="margin-top: 50px;">
                <el-button type="primary" @click="handleCurrent()" :disabled="state.single">设为当前展会</el-button>
                <el-button @click="visible = false">取消</el-button>
            </el-form-item>
        </el-form>
        <!-- 页码 -->
        <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
            :total="state.total" layout="total, sizes, prev, pager, next, jumper"
            @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    </el-dialog>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, } from "vue";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";
const view = reactive({
    getDataListURL: '/crm/crmexhibition/page',
    getDataListIsPage: true,
    deleteURL: "/crm/crmexhibition",
    deleteIsBatch: true,
    dataForm: {
        id: "",
        state: "",
        exhName: "",
        exhSName:"",
        dataListSelections: [],
        exhBTime: "",//开始日期
        exhETime: "",//结束日期
        project:"",
    },
    dataForm2: {},
});

const dataFormRef = ref();
const visible = ref(false);
const emit= defineEmits(['click', 'refreshDataList','refreshexhibitionlist'])

//初始化
const init = () => {
    visible.value = true
    // 重置表单数据
    if (dataFormRef.value) {
        dataFormRef.value.resetFields();
    }
};

/**
 * 设置当前展会
 */
const handleCurrent = () => {
    let ids: string[] = [];
    for (let i = 0; i < state.dataListSelections!.length; i++) {
        ids.push(state.dataListSelections![i].id);
    }
    state.dataForm2 = ids;
    return baseService.put("/sys/user/updateCurExh", state.dataForm2).then((res) => {
        if (res.code == 0) {
            // 重新获取数据列表
            visible.value = false;
            state.getDataList();
            emit("refreshDataList");
            emit("refreshexhibitionlist");
            return ElMessage.success("设置当前展会成功");
        }
    });
}

const state = reactive({ ...useView(view), ...toRefs(view) });

//页面进入执行
defineExpose({
    init
});

</script>
<style lang="scss" scoped>
.message {
    font-size: 14px;
    font-weight: 600
}

.el-input {
    width: 217px;
}
::v-deep .el-table .cell {
  white-space: nowrap;
  font-size: 13px;
  height: 18px;
  line-height: 18px;
  }
</style>
